<template>
  <div class="hello">
    <div class="top">
      <el-input v-model="bookName" placeholder="请输入书籍名称"></el-input>
      <el-button @click="getData" type="primary">查询</el-button>
    </div>
    <el-table
      v-loading="loading"
      stripeborder
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="name" label="书名"> </el-table-column>
      <!-- <el-table-column prop="id" label="书籍id"> </el-table-column> -->
      <el-table-column prop="subject" label="介绍"> </el-table-column>
      <el-table-column prop="publish" label="出版日期" width="180">
      </el-table-column>
      <el-table-column prop="author" label="作者" width="180">
      </el-table-column>

      <!-- <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button @click="toEdit(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="toDelete(scope.row)" type="text" style="color: red" size="small">删除</el-button>
        </template>
      </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <!-- <el-button @click="toEdit(scope.row)" type="text" size="small">修改</el-button> -->
          <el-button
            @click="toBorrow(scope.row)"
            type="text"
            style="color: red"
            size="small"
            >借阅</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
    <edit-dialog
      @editSuccessed="editSuccessed"
      @closeDialog="closeDialog"
      :editVisible="dialogFormVisible"
      :editData="editData"
    />
  </div>
</template>

<script>
import axios from "axios";
import editDialog from "./editDialog.vue";

export default {
  name: "BookTable",
  props: {
    msg: String,
  },
  data() {
    return {
      total: 10,
      loading: false,
      bookName: "",
      tableData: [],
      dialogFormVisible: false,
      editData: {
        id: "",
        author: "",
        name: "",
      },
    };
  },
  // 生命周期函数 挂载前调用
  beforeMount() {
    this.getData();
  },
  components: {
    editDialog,
  },
  methods: {
    // 获取table的数据
    getData() {
      this.loading = true;
      // 将url接口地址替换即可
      axios
        .post("http://localhost:3300/books", { bookName: this.bookName, pageSize: 5, pageNum: 1 })
        .then((res) => {
          this.loading = false;
          this.tableData = res.data.books;
          this.total = res.data.total;
        });
    },
    // 删除数据
    /*
    toDelete(row) {
      //确认是否决定删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确认
        axios.post('http://localhost:3300/delete', { id: row.id }).then((res) => {
          if (res.status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getData();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }, */
    // 修改数据
    // toEdit(row) {
    //   this.editData = {
    //     id: row.id,
    //     name: row.name,
    //     author: row.author
    //   }
    //   this.dialogFormVisible = true;
    // },
    toBorrow(row) {
      console.log(row);
      // axios.put("")
      alert("toBorrow");
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    editSuccessed() {
      this.dialogFormVisible = false;
      // 修改成功后再调用一次getData
      this.getData();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  width: 90%;
  margin-left: 5%;
}

.top {
  display: flex;
  margin-bottom: 24px;
}

.top > .el-input {
  width: 240px;
  margin-right: 16px;
}
</style>
